<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<!--老师解读
1. div 元素不是必须的，也可以是其它元素，比如 span,但是约定都是将 vue 实例挂载到 div
2. 因为 div 更加适合做布局
3. id 不是必须为 app , 是程序员指定,一般我们就使用 app
-->
<div id="app">
    <!--1. {{message}}:插值表达式-->
    <!--2. message 就是从model的data数据池来设置-->
    <!--3.当我们的代码执行时，会到data{} 数据池中去匹配数据，如果匹配上，就进行替换-->
    <!--如果没有匹配上，就是输出空-->
    <h1>{{message}}-{{name}}</h1>
</div>
<!--引入vue.js-->
<script src="vue.js"></script>
<script>
    <!--创建Vue对象实例-->
    let vm =new Vue({
        el: '#app',//将创建的vue实例挂载到id=app的div
        data: {//data{}表示数据层(model有了数据), 以k-v形式设置
            message: 'Hello Vue!',
            name:"mlh"
        }
    })
    console.log('mlh-vm=',vm)
    console.log('方式一=',vm._data.message)
    console.log('方式二=',vm.message)
</script>
</body>
</html>